<template>
<div class="list-view">
	<list-header
		:link="{name: 'taskList'}"
		:title="$t('ResultList.title')"
		:subtitle="task ? task.name : $t('Const.Loading')"></list-header>
	<ul class="list-group list-group-flush m-l-3">
		<li class="list-group-item">
			<p class="list-group-item-text text-light text-small">
				{{$t("ResultList.listHeader")}}
			</p>
		</li>
		<li
			class="list-group-item"
			v-bind:class="{'open': openIndex == $index}"
			v-for="r in reportList"
			@click="showCase($index)"
			track-by="resultId">
			<div class="pull-xs-left show-case">
				<i v-show="openIndex != $index" class="plus icon"></i>
				<i v-show="openIndex == $index" class="minus icon"></i>
			</div>
			<div
				class="pull-xs-right text-small pass-rate"
				v-bind:class="{'text-warning': r.passRate < 60,
				'text-success': r.passRate >= 60}">{{r.passRate}}%</div>
			<div class="pull-xs-left {{r.browser}} browser">{{r.browser}}</div>
			<div class="pull-xs-left {{r.os}} os">{{r.os}}</div>
			<div class="name text-muted text-truncate">
				#{{r.resultId}}
				<span class="hidden-xs-down">
					&ensp;&bull;&ensp;
					{{r.name}}
				</span>
			</div>
			<div class="list-group-flush case-list">
				<a
					class="list-group-item text-underline"
					v-for="c in r.caseList"
					v-bind:class="{'text-warning': !c.$overview.isAllPassed}"
					v-link="{name: 'caseResult', params: {caseIndex: $index}, query: {resultId: r.resultId}}"
					track-by="$index"
					href>
					<span>{{task.schemas.caseList[$index].name}}</span>
					<span class="pull-xs-right">
						{{c.$overview.isAllPassed?'&check;':'&cross;'}}
					</span>
				</a>
			</div>
		</li>
	</div>
</div>
</template>

<script>
import ListHeader from '../component/ListHeader.vue';
import {getTask, getResultList} from '../resource';
import RP from 'lemonce-result-parser';

export default {
	components: {ListHeader},
	data: function () {
		return {
			openIndex: -1,
			task: null,
			resultList: []
		};
	},
	route: {
		data: async function ({to: {params}}) {
			var task = await getTask(params.taskId);
			var resultList = await getResultList(params.projectId, params.taskId);

			return {task, resultList, openIndex: -1};
		}
	},
	methods: {
		showCase: function (index) {
			this.openIndex = this.openIndex === index ? -1 : index;
		}
	},
	computed: {
		report: function () {
			if (this.task && this.resultList.length) {
				var resOpts = {name: 's13', tR: []};

				this.resultList.forEach(function (result) {
					resOpts.tR.push({
						data: JSON.parse(result.data)
					});
				});

				return new RP(this.task, resOpts).$resultList;
			}

			return null;
		},
		// computed from report
		reportList: function () {
			var r = this.report;
			if (!r) {
				return null;
			}
			
			var scope = this;
			return r.map(function (result, index) {
				var passRate = ~~(result.$overview.allPassedNumber /
					result.$overview.totalTimes * 100);
				var browser = result.$env.browser.name;
				var os = result.$env.os.name;
				var name = scope.resultList[index].name;
				var resultId = scope.resultList[index].resultId;
				var caseList = result.$caseResultList.slice(0);

				return {passRate, browser, os, name, resultId, caseList};
			});
		}
	}
}
</script>

<style scoped lang="postcss">
.name {
	width: 8rem;
}
.show-case {
	margin-left: -3rem;
}
li:not(:first-child) {
	cursor: pointer;
}
.list-group-item {
	position: relative;
}
.browser, .os {
	width: 1.5rem;
	&:after {
		content: "";
		position: absolute;
		top: 1.2rem;
		display: block;
		width: 1rem;
		height: 1rem;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
	}
}
.browser:after {
	right: 6rem;
}
.os:after {
	right: 4rem;
}

.case-list {
	display: none;
	height: 0;
}
.open .case-list {
	display: block;
	height: inherit;
}
@media (width >= 1000px) {
	.name {
		width: 28rem;
	}
}
</style>